<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择人员"
    width="50%"
    :before-close="handleClose"
  >
    <div class="person-dialog">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入人员姓名或编号"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button @click="handleSearch" :icon="Search"></el-button>
          </template>
        </el-input>
      </div>

      <!-- 人员列表 -->
      <div class="person-list">
        <el-table
          :data="personList"
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="serialNumber" label="序号" width="80" />
          <el-table-column prop="personNumber" label="人员编号" width="120" />
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="department" label="部门" width="120" />
          <el-table-column prop="position" label="职位" width="120" />
          <el-table-column prop="phone" label="联系电话" width="150" />
          <el-table-column prop="email" label="邮箱" />
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getAllPersons } from '@/Https/server'

// Props
const props = defineProps<{
  modelValue: boolean
}>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'select': [person: any]
}>()

// 响应式数据
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const searchKeyword = ref('')
const personList = ref<any[]>([])
const selectedPerson = ref<any>(null)

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 模拟人员数据
const mockPersonList = [
  {
    id: 1,
    serialNumber: 1,
    personNumber: 'P001',
    name: '李爽',
    department: '采购部',
    position: '采购经理',
    phone: '13800138001',
    email: 'lishuang@company.com'
  },
  {
    id: 2,
    serialNumber: 2,
    personNumber: 'P002',
    name: '王强',
    department: '采购部',
    position: '采购专员',
    phone: '13800138002',
    email: 'wangqiang@company.com'
  },
  {
    id: 3,
    serialNumber: 3,
    personNumber: 'P003',
    name: '张丽',
    department: '供应链部',
    position: '供应链经理',
    phone: '13800138003',
    email: 'zhangli@company.com'
  }
]

// 方法
const loadPersonList = async () => {
  try {
    // 这里应该调用真实的API
    // const response: any = await getAllPersons()
    // personList.value = response.data || response.Data || []
    
    // 使用模拟数据
    personList.value = mockPersonList
    pagination.total = mockPersonList.length
  } catch (error) {
    console.error('加载人员列表失败:', error)
  }
}

const handleSearch = () => {
  // 实现搜索逻辑
  if (searchKeyword.value) {
    personList.value = mockPersonList.filter(person => 
      person.name.includes(searchKeyword.value) || 
      person.personNumber.includes(searchKeyword.value)
    )
  } else {
    personList.value = mockPersonList
  }
}

const handleSelectionChange = (selection: any[]) => {
  if (selection.length > 0) {
    selectedPerson.value = selection[0]
  }
}

const handleRowClick = (row: any) => {
  selectedPerson.value = row
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
}

const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
}

const handleClose = () => {
  dialogVisible.value = false
  searchKeyword.value = ''
  selectedPerson.value = null
}

const handleConfirm = () => {
  if (selectedPerson.value) {
    emit('select', selectedPerson.value)
    dialogVisible.value = false
  }
}

// 生命周期
onMounted(() => {
  loadPersonList()
})
</script>

<style scoped>
.person-dialog {
  max-height: 60vh;
  overflow-y: auto;
}

.search-area {
  margin-bottom: 20px;
}

.person-list {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 